<style lang="scss" scoped>
@import 'css/index';
</style>

<template>
  <div style="width: 100%;height: 100%">
    <el-row class="core-container">
      <el-col :span="16" class="left-main-col">
        <Background />
      </el-col>
      <el-col :span="8" class="right-main-col">
        <AccountPasswordLogin v-if="loginWay === 1" @switchLoginWay="switchLoginWay" />
        <PhoneCodeLogin v-else-if="loginWay === 2" @switchLoginWay="switchLoginWay" />
        <SiteInfo />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Background from './components/Background.vue'
import AccountPasswordLogin from './components/AccountPasswordLogin.vue'
import SiteInfo from './components/SiteInfo.vue'
import PhoneCodeLogin from './components/PhoneCodeLogin.vue'

export default {
  name: 'Login',
  components: { Background, AccountPasswordLogin, SiteInfo, PhoneCodeLogin },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      loginWay: 1,
      loginWayMap: {
        1: '账号密码登录',
        2: '手机号验证码登录'
        // 3: '企业APP扫码登录',
        // 4: 'QQ扫码登录',
        // 5: '微信扫码登录'
      },
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  destroyed() {
  },
  methods: {
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    switchLoginWay(way) {
      const wayTitle = this.loginWayMap[way] ?? ''
      if (!wayTitle) {
        this.$message.warning('您选择的登录方式暂未实现')
        return
      }
      this.loginWay = parseInt(way)
    }
  }
}
</script>
